
<template>
  <AgelMapInput class="full-w" v-model="curValue" :AMap="mapLoader" :placeholder="placeholder" @confrim="handleChange">
  </AgelMapInput>
</template>
 
<script setup lang="ts">
type resloveAMap = (AMap: any) => void
import AMapLoader from "@amap/amap-jsapi-loader";
const props = defineProps({
  /**当前双向数据绑定的值 */
  modelValue: {
    type: [String, Number],
    default: ''
  },
  /**输入框内部的文字 */
  placeholder: {
    type: String,
    default: '请选择'
  }
})

const curValue = computed({
  get: () => {
    return [props.modelValue]
  },
  set: (val) => {
    emits('update:model-value', val[0]);
  }
});

const emits = defineEmits(['update:model-value', 'change']);
const mapLoader = (reslove: resloveAMap) => {
  AMapLoader.load({
    key: "4d286bbc25e19c4b323aa32567ea0aec",    // map key
    version: '2.0',
    plugins: ["AMap.PlaceSearch", "AMap.AutoComplete", "AMap.Geocoder"],   // 所需要插件列表
  }).then((AMap) => reslove(AMap));
}
const handleChange = (val: any) => {
  emits('update:model-value', val.address);
  emits('change', val)
}
</script>